<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运营数据</title>
    <link rel="stylesheet" href="http://unpkg.com/layui@2.6.8/dist/css/layui.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div>
        <!-- 活动数据 -->
        <div class="layui-row">
            <form class="layui-form layui-col-md12 x-so" action="" method="get">
                <div class="data_title">活动数据</div>
                <div>
                    <label class="layui-form-label">时间：</label>
                    <div class="layui-inline layui-date-range" id="test-range1">
                        <div class="layui-input-inline">
                            <input type="text" name="start_time" id="start_time1" class="layui-input"
                                placeholder="开始时间">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" name="end_time" id="end_time1" class="layui-input" placeholder="结束时间">
                        </div>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label">所属区域：</label>
                    <div class="layui-input-block">
                        <select name="region" id="region1" lay-filter="region"  data-index="1" lay-verify="required" lay-search="">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label">项目名称：</label>
                    <div class="layui-input-block">
                        <select name="project_id" id="project_id1" lay-filter="project_id" lay-verify="required"
                            lay-search="">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="layui-btn" onclick="getData(1)">查询</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="initial(1)">重置</button>
            </form>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="order_list order_list1">

            </div>
        </div>

        <!-- 交付预约 -->
        <div class="layui-row">
            <form class="layui-form layui-col-md12 x-so" action="" method="get">
                <div class="data_title">交付预约</div>
                <div>
                    <label class="layui-form-label">时间：</label>
                    <div class="layui-inline layui-date-range" id="test-range2">
                        <div class="layui-input-inline">
                            <input type="text" name="start_time" id="start_time2" class="layui-input"
                                placeholder="开始时间">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" name="end_time" id="end_time2" class="layui-input" placeholder="结束时间">
                        </div>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label">所属区域：</label>
                    <div class="layui-input-block">
                        <select name="region" id="region2" lay-filter="region"  data-index="2" lay-verify="required" lay-search="">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label">项目名称：</label>
                    <div class="layui-input-block">
                        <select name="project_id" id="project_id2" lay-filter="project_id" lay-verify="required"
                            lay-search="">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="layui-btn" onclick="getData(2)">查询</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="initial(2)">重置</button>
            </form>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="order_list order_list2">

            </div>
        </div>

        <!-- 文章数据 -->
        <div class="layui-row">
            <form class="layui-form layui-col-md12 x-so" action="" method="get">
                <div class="data_title">文章数据</div>
                <div>
                    <label class="layui-form-label">时间：</label>
                    <div class="layui-inline layui-date-range" id="test-range3">
                        <div class="layui-input-inline">
                            <input type="text" name="start_time" id="start_time3" class="layui-input"
                                placeholder="开始时间">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" name="end_time" id="end_time3" class="layui-input" placeholder="结束时间">
                        </div>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label">所属区域：</label>
                    <div class="layui-input-block">
                        <select name="region" id="region3" lay-filter="region"  data-index="3" lay-verify="required" lay-search="">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label">项目名称：</label>
                    <div class="layui-input-block">
                        <select name="project_id" id="project_id3" lay-filter="project_id" lay-verify="required"
                            lay-search="">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="layui-btn" onclick="getData(3)">查询</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="initial(3)">重置</button>
            </form>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="order_list order_list3">

            </div>
        </div>

        <!-- 视频数据 -->
        <div class="layui-row">
            <form class="layui-form layui-col-md12 x-so" action="" method="get">
                <div class="data_title">视频数据</div>
                <div>
                    <label class="layui-form-label">时间：</label>
                    <div class="layui-inline layui-date-range" id="test-range4">
                        <div class="layui-input-inline">
                            <input type="text" name="start_time" id="start_time4" class="layui-input"
                                placeholder="开始时间">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" name="end_time" id="end_time4" class="layui-input" placeholder="结束时间">
                        </div>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label">所属区域：</label>
                    <div class="layui-input-block">
                        <select name="region" id="region4" lay-filter="region" data-index="4" lay-verify="required" lay-search="">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label">项目名称：</label>
                    <div class="layui-input-block">
                        <select name="project_id" id="project_id4" lay-filter="project_id" lay-verify="required"
                            lay-search="">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="layui-btn" onclick="getData(4)">查询</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="initial(4)">重置</button>
            </form>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="order_list order_list4">

            </div>
        </div>

        <!--  -->
        <div class="data_title">数据概览</div>
        <div class="data_list">
            <div class="data_list_item">
                <div class="data_list_small">待发布</div>
                <div>
                    <a href="#">
                        <p class="data_list_title">文章</p>
                        <p class="data_list_number news_status1"></p>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <p class="data_list_title">视频</p>
                        <p class="data_list_number videos_status1"></p>
                    </a>
                </div>
            </div>
            <div class="data_list_item">
                <div class="data_list_small">已发布</div>
                <div>
                    <a href="#">
                        <p class="data_list_title">文章</p>
                        <p class="data_list_number news_status2"></p>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <p class="data_list_title">视频</p>
                        <p class="data_list_number videos_status2"></p>
                    </a>
                </div>
            </div>
            <div class="data_list_item">
                <div class="data_list_small">已定时发布</div>
                <div>
                    <a href="#">
                        <p class="data_list_title">文章</p>
                        <p class="data_list_number news_status3"></p>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <p class="data_list_title">视频</p>
                        <p class="data_list_number videos_status3"></p>
                    </a>
                </div>
            </div>
            <div class="data_list_item">
                <div class="data_list_small">已修订待更新</div>
                <div>
                    <a href="#">
                        <p class="data_list_title">文章</p>
                        <p class="data_list_number news_status4"></p>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <p class="data_list_title">视频</p>
                        <p class="data_list_number videos_status4"></p>
                    </a>
                </div>
            </div>
            <div class="data_list_item">
                <div class="data_list_small">已下架</div>
                <div>
                    <a href="#">
                        <p class="data_list_title">文章</p>
                        <p class="data_list_number news_status5"></p>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <p class="data_list_title">视频</p>
                        <p class="data_list_number videos_status5"></p>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="http://unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script src="./index.js"></script>
<script>
    var laydate = layui.laydate;
    laydate.render({
        elem: '#test-range1',
        range: ['#start_time1', '#end_time1']
    });
    laydate.render({
        elem: '#test-range2',
        range: ['#start_time2', '#end_time2']
    });
    laydate.render({
        elem: '#test-range3',
        range: ['#start_time3', '#end_time3']
    });
    laydate.render({
        elem: '#test-range4',
        range: ['#start_time4', '#end_time4']
    });

    getData(1)
    getData(2)
    getData(3)
    getData(4)

    function getData(type) {
        let start_time = $('#start_time' + type) // 开始时间dom
        let end_time = $('#end_time' + type) // 结束时间dom
        let project_id = $('#project_id' + type) // 项目名称dom
        let region = $('#region' + type) // 项目名称dom

        let url = ''
        if (type == 1) {
            url = 'operation_data_activity'
        }
        if (type == 2) {
            url = 'operation_data_delivery'
        }
        if (type == 3) {
            url = 'operation_data_news'
        }
        if (type == 4) {
            url = 'operation_data_videos'
        }

        $.ajax({
            type: 'post',
            url: 'http://xdwy-develop.huijik.com/base/' + url,
            data: {
                start_time: start_time.val(),
                end_time: end_time.val(),
                project_id: project_id.val(),
                region_id: region.val(),
            },
            dataType: 'json',
            success: function (res) {
                let data = res.data

                if (type == 1) {
                    let html = `<div class="order_item">
                                    <div class="order_item_title">活动场次</div>
                                    <div class="order_item_num">
                                        <p><span>${data.activity_num}</span>场</p>
                                    </div>
                                </div>
                                <div class="order_item">
                                    <div class="order_item_title">总报名人数</div>
                                    <div class="order_item_num">
                                        <p><span>${data.activity_enlist}</span>人</p>
                                    </div>
                                </div>`
                    $('.order_list1').html(html)
                }

                if (type == 2) {
                    let html = `<div class="order_item">
                                    <div class="order_item_title">场次</div>
                                    <div class="order_item_num">
                                        <p><span>${data.delivery_num}</span>场</p>
                                    </div>
                                </div>
                                <div class="order_item">
                                    <div class="order_item_title">预约人数</div>
                                    <div class="order_item_num">
                                        <p><span>${data.delivery_people_num}</span>人</p>
                                    </div>
                                </div>`
                    $('.order_list2').html(html)
                }

                if (type == 3) {
                    let html = `<div class="order_item">
                                    <div class="order_item_title">发布数量</div>
                                    <div class="order_item_num">
                                        <p><span>${data.news_num}</span>篇</p>
                                    </div>
                                </div>
                                <div class="order_item">
                                    <div class="order_item_title">浏览人数</div>
                                    <div class="order_item_num">
                                        <p><span>${data.news_pageviews}</span>人</p>
                                    </div>
                                </div>`
                    $('.order_list3').html(html)

                    $(".news_status1").html(data.news_status1)
                    $(".news_status2").html(data.news_status2)
                    $(".news_status3").html(data.news_status3)
                    $(".news_status4").html(data.news_status4)
                    $(".news_status5").html(data.news_status5)
                }

                if (type == 4) {
                    let html = `<div class="order_item">
                                    <div class="order_item_title">发布数量</div>
                                    <div class="order_item_num">
                                        <p><span>${data.videos_num}</span>篇</p>
                                    </div>
                                </div>
                                <div class="order_item">
                                    <div class="order_item_title">浏览人数</div>
                                    <div class="order_item_num">
                                        <p><span>${data.videos_pageviews}</span>人</p>
                                    </div>
                                </div>`
                    $('.order_list4').html(html)

                    $(".videos_status1").html(data.videos_status1)
                    $(".videos_status2").html(data.videos_status2)
                    $(".videos_status3").html(data.videos_status3)
                    $(".videos_status4").html(data.videos_status4)
                    $(".videos_status5").html(data.videos_status5)
                }
            }
        })
    }

    function initial(type) {
        $('#start_time' + type).val('')
        $('#end_time' + type).val('')
        $('#project_id' + type).val('')
        $('#region' + type).val('')
    }
</script>

</html>